<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="referrer" content="no-referrer">
  <title>Document</title>
  <link rel="stylesheet" href="/static/lib/layui/css/layui.css">
  <link rel="stylesheet" href="/static/css/index.css">
  <script src="/static/lib/layui/layui.js"></script>
  <script src="/static/js/jquery.min.js"></script>
  <style>
    #reptile{
      display: block !important;
    }
    .btn01{
      margin-top: 10px;
      margin-left: 10px;
    }
  </style>
</head>
<body>
  <!-- <button type="button" class="layui-btn layui-btn-normal btn01" onclick="save()">保存数据</button> -->
  <button type="button" class="layui-btn btn01" onclick="window.history.back(-1)">回首页</button>

  <table id="reptile" lay-filter="reptile"></table>

  <script>
    var d = document.createElement("div")
    d.innerHTML = "{{data}}"

    console.log(JSON.parse(d.innerHTML))

    function save(){
      var type = {{type}};
      $.ajax({
        url:"/save",
        data:{
          obj:JSON.parse(d.innerHTML),
          type
        },
        dataType:"json",
        success:function(e){
          console.log(e)
        }
      })
    }

    layui.use('table', function(){
      var table = layui.table;
      {{if type == 1}}
        var tableIns = table.render({
          elem: '#reptile'
          ,id:"reptile"
          ,page: true //开启分页
          ,limit:12
          ,limits:[12,24,36,48,60]
          ,data:JSON.parse(d.innerHTML)
          ,cols: [[ //表头
            {field: 'title', title: '标题',width:"35%"}
            ,{field:'list_img',title:"商品图片",width:130, templet:function(e){
              return(`<img src="${e.list_img}" alt="" />`)
            }}
            ,{field:'detail_img',title:"细节图",width:"30%",templet:function(e){
              var h = "<div class='detail_img'>"
              for(let item of e.detail_img){
                h+=`<img src="${item.src}" alt="${item.name}" />`
              }
              h+="</div>"
              return h;
            }}
            ,{field:"price",title:"商品价格",sort:true}
            ,{field:"store",title:"所属店铺"}
            ,{field: 'action', title:'操作', width:"10%", templet: function(d){return (
              `
                <a class="layui-btn layui-btn-sm layui-btn-normal" href="{{base_path}}${d.detail_href}" target="_blank">查看商品</a>
                <a class="layui-btn layui-btn-sm" href="{{base_path}}${d.store_href}" target="_blank">查看店铺</a>
              `)}}
          ]]
        });
      {{else if type == 2}}
        var tableIns = table.render({
          elem: '#reptile'
          ,id:"reptile"
          ,page: true //开启分页
          ,limit:25
          ,limits:[25,50,75,100]
          ,data:JSON.parse(d.innerHTML)
          ,cols: [[ //表头
            {field: 'paiming', title: '排名', width:"10%",sort:true}
            ,{field: 'title', title: '标题',width:"25%"}
            ,{field:'list_img',title:"影视封面",width:130, templet:function(e){
              return(`<img src="${e.list_img}" alt="" />`)
            }}
            // ,{field:"info",title:"影视简介",width:"25%"}
            ,{field:"rating_num",title:"评分"}
            ,{field: 'action', title:'操作', width:"10%", templet: function(d){return (
              `
                <a class="layui-btn layui-btn-sm" href="${d.href}" target="_blank">查看详情</a>
              `)}}
          ]]
        });
      {{/if}}

      layui.t_reload = function (data){
        tableIns.reload({
          elem: '#reptile'
          ,id:"reptile"
          ,data
          ,limit:12
          ,page: {
            curr: 1 //重新从第 1 页开始
          }
          ,done:function(res, curr, count){
            // init_li(id)
            console.log(res, curr, count)
          }
        });
        //获取栏目
        // get_sectionData(id)
      }
    })
  </script>
</body>
</html>